import TreeTransfer, {TreeTransferProps} from "@/pages/Admin/System/RoleManage/components/TreeTransfer";
import {userListReq} from "@/service/user.ts";
import {SuccessCode} from "@/utils/request.ts";
import {Button, Card, Form, Modal, Space, Table, TreeDataNode, Typography} from "antd";
import {useForm} from "antd/es/form/Form";
import FormItem from "antd/es/form/FormItem";
import Input from "antd/es/input/Input";
import {ColumnsType} from "antd/es/table";
import {useEffect, useState} from "react";
import {useTranslation} from "react-i18next";
import styles from "./index.module.css"

const treeData: TreeDataNode[] = [
    { key: '/admin/dashboard', title: '仪表盘' },
    {
        key: '/admin/resource',
        title: '资源管理',
        children: [
            { key: '/admin/resource/article', title: '文章管理' },
        ],
    },
    {
        key: '/admin/system',
        title: '系统设置',
        children: [
            { key: '/admin/system/user', title: '用户管理' },
        ],
    },
];

const RoleManage = () => {
    const [t] = useTranslation()
    const [saveForm] = useForm()
    const [searchForm] = useForm()
    const [isShowCreateModal, setIsShowCreateModal] = useState(false)
    const [tableData, setTableData] = useState<API.UserListRespItem[]>([])
    const [targetKeys, setTargetKeys] = useState<TreeTransferProps['targetKeys']>([]);


    useEffect(() => {
        userListReq({}).then(res => {
            if (res.code == SuccessCode) {
                setTableData(res.data.items)
            }
        })
    }, []);

    const loadTableData = () => {

    }

    const onCreate = () => {

    }

    const renderCreateModal = () => {
        return (
            <Modal open={isShowCreateModal}
                   centered
                   title={t("page.role.createRole")}
                   width={800}
                   onCancel={() => {
                       setIsShowCreateModal(false)
                       saveForm.resetFields()
                   }}
                   onOk={() => saveForm.submit()}
            >
               <Card bordered={false}>
                   <Form form={saveForm} onFinish={onCreate} autoComplete="off">
                       <FormItem label={t("page.role.table.name")} name={"username"}
                                 rules={[{
                                     required: true,
                                     message: t("page.form.required.input", {value: t("page.role.table.name")})
                                 }]}>
                           <Input placeholder={t("page.pleaseInput")} autoComplete="off"/>
                       </FormItem>
                       <FormItem label={t("page.role.assignMenu")} name={'menus'}>
                           <TreeTransfer showSearch={true} onSearch={() => {
                               // setMenuTreeData(treeData.filter(item => item.))
                           }} dataSource={treeData} targetKeys={targetKeys} onChange={(keys) => {
                               setTargetKeys(keys);
                           }}/>
                       </FormItem>
                   </Form>
               </Card>
            </Modal>
        )
    }

    const tableColumns: ColumnsType<API.UserListRespItem> = [
        {
            title: "ID",
            dataIndex: "id",
            width: 200,
            render: value =>
                <Typography.Text style={{width: 100}}
                                 ellipsis={{tooltip: value}}>
                    {value}
                </Typography.Text>
        },
        {
            title: t('page.role.table.name'),
            dataIndex: "name"
        },
        {
            title: t('page.role.table.menuAuth'),
            dataIndex: "menu_auth"
        },
        {
            title: t('page.action'),
            align: "center",
            render: () => {
                return (
                    <Space>
                        <Button type={"link"}>
                            {t('page.edit')}
                        </Button>
                    </Space>
                )
            }
        }
    ]

    return (
        <div className={styles.RoleManage}>
            <div className={"flex justify-between items-start"}>
                <Form form={searchForm} layout={'inline'} onKeyDown={(event) => {
                    if (event.key === "Enter") {
                        loadTableData()
                    }
                }}>
                    <FormItem label={t("page.role.table.name")} name={"username"}>
                        <Input placeholder={t("page.pleaseInput")}/>
                    </FormItem>
                    <FormItem>
                        <Button type={"primary"} onClick={loadTableData}>{t("page.search")}</Button>
                    </FormItem>
                    <FormItem>
                        <Button type={"dashed"} onClick={() => {
                            searchForm.resetFields()
                            loadTableData()
                        }}>{t("page.reset")}</Button>
                    </FormItem>
                </Form>

                <div className={styles.ActionWrap}>
                    <Space>
                        <Button type={"primary"} onClick={() => {
                            setIsShowCreateModal(true)
                        }}>{t("page.create")}</Button>
                    </Space>
                </div>
            </div>

            <Table style={{marginTop: 20}} columns={tableColumns} dataSource={tableData} rowKey={"id"}/>
            {renderCreateModal()}
        </div>
    );
};

export default RoleManage;
